<template>
  <div>
    <Category />
    <el-card
      shadow="always"
      :body-style="{ padding: '20px' }"
      style="margin-top: 30px"
    >
      <SpuList v-if="type === 0" @changeType="changeType" />
      <SpuForm v-if="type === 1" :spuInfo="spuInfo" @changeType="changeType" />
      <SkuForm v-if="type === 2" :spuInfo="spuInfo" @changeType="changeType" />
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import type { spuItemType } from "@/api/spu";

import useCategoryStore from "@/stores/category";
import { storeToRefs } from "pinia";
export default defineComponent({
  name: "Spu",
});
</script>

<script setup lang="ts">
import { ref } from "vue";
import SpuList from "./components/SpuList/index.vue";
import SpuForm from "./components/SpuForm/index.vue";
import SkuForm from "./components/SkuForm/index.vue";

//拿到三级分类的信息
const categoryStore = useCategoryStore();
const { category3Id } = storeToRefs(categoryStore);
//控制当前展示的组件
const type = ref(0);
//设置spuInfo的默认数据
const spuInfo = ref<spuItemType>({
  spuName: "",
  description: "",
  category3Id: category3Id.value as number,
  tmId: 0,
  //在分页列表的请求中,当前spu的拥有的销售属性是null,因为不需要展示
  spuSaleAttrList: null,
  //在分页列表的请求中,当前spu的拥有的图片列表是null,因为不需要展示
  spuImageList: null,
});
// 切换type的自定义事件函数
const changeType = (newType: number, row?: spuItemType) => {
  type.value = newType;
  //判断row是否存在,如果存在就直接把初始的spuInfo修改
  if (row) {
    spuInfo.value = row;
  } else {
    //如果没有row则要清空spuInfo的数据
    spuInfo.value = {
      spuName: "",
      description: "",
      category3Id: category3Id.value as number,
      tmId: 0,
      //在分页列表的请求中,当前spu的拥有的销售属性是null,因为不需要展示
      spuSaleAttrList: null,
      //在分页列表的请求中,当前spu的拥有的图片列表是null,因为不需要展示
      spuImageList: null,
    };
  }
};
</script>

<style scoped></style>
